<template>
  <div class="expand-table-wrap">
    <div v-loading="isLoadding" v-if="tableDataCopy.length > 0" class="expand-table-container">
      <div class="expand-table-title">
        <div class="left title">字段类别<span style="color:#999;font-size:12px;">（可拖动进行排序）</span></div>
        <div class="right title">操作</div>
      </div>
      <draggable
        v-model="tableDataCopy"
        v-bind="{animation: 200,group: 'description',disabled: false, ghostClass: 'ghost'}"
        group="field-type"
        handle=".draggable-move">
        <transition-group type="transition">
          <div v-for="(item, $index) in tableDataCopy" :key="item.id" :style="item._isExpend?{borderColor: 'transparent'}:''" class="expand-table-item">
            <div class="expand-table-item-list draggable-move" @click="expendClick(item)">
              <div class="left">{{ item.name }}</div>
              <!-- v3.0.9.1修改:公式字段不可编辑,删除 -->
              <div v-if="item.name !== '公式字段'" class="right field-btn">
                <div class="pointer" style="margin-right:10px;" @click="editField(item,$event)">编辑</div>
                <div class="pointer" @click="deleteField(item,$event)">删除</div>
              </div>
            </div>
            <div v-if="item._isExpend" class="expand-open-container">
              <div v-if="item.fieldInfo.length > 0" class="expand-content" >
                <el-row style="width:100%;">
                  <draggable
                    v-model="item.fieldInfo"
                    v-bind="{animation: 200,group: 'description1',disabled: false, ghostClass: 'ghost1'}"
                    :group="'field-item'+item.id"
                    handle=".draggable-item-move"
                    @change="draggablechange">
                    <transition-group type="transition">
                      <el-col v-for="(field, findex) in item.fieldInfo" :span="showMobilePage ? 24 : 6" :key="field.id" class="inner-border draggable-item-move">
                        <field-list-item
                          :info="field"
                          :parent-index="$index"
                          :children-index="findex"
                          @edit="itemEdit"
                          @delete="itemDelete" />
                      </el-col>
                    </transition-group>
                  </draggable>
                </el-row>
              </div>
              <div v-else class="expand-content-no-data">暂无数据</div>
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>
    <empty-placeholder v-else style="margin-bottom: 24px" />
  </div>
</template>
<script>
import FieldListItem from '@/components/FieldManage/fieldListItem';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import draggable from 'vuedraggable';
import { settingSort } from '@/api/setting';
import { mapState } from 'vuex';
export default {
  name: 'FieldExpandTable',
  components: {
    FieldListItem,
    EmptyPlaceholder, draggable
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    isLoadding: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    tableDataCopy: {
      get() {
        return this.tableData;
      },
      set(data) {
        this.resetSort(data);
      }
    }
  },
  methods: {
    expendClick(item) {
      this.$set(item, '_isExpend', !item._isExpend);
    },
    editField(item, e) {
      e.stopPropagation();
      this.$emit('editFieldType', item);
    },
    deleteField(item, e) {
      e.stopPropagation();
      this.$emit('deleteFieldType', item);
    },
    // 根据数组位置归纳出需要放置于那一列的数据过滤 remain 为余数
    concludeArray(fields) {
      const totalArr = [];
      const firstColumn = [];
      const secondColumn = [];
      const thirdColumn = [];
      const fourthCoumn = [];
      fields.forEach((item, index) => {
        const remainValue = (index + 1) % 4;
        switch (remainValue) {
          case 1:
            firstColumn.push(item);
            break;
          case 2:
            secondColumn.push(item);
            break;
          case 3:
            thirdColumn.push(item);
            break;
          case 0:
            fourthCoumn.push(item);
            break;
        }
      });
      totalArr[0] = firstColumn;
      totalArr[1] = secondColumn;
      totalArr[2] = thirdColumn;
      totalArr[3] = fourthCoumn;
      return totalArr;
    },
    itemEdit(info) {
      this.$emit('itemEdit', info);
    },
    itemDelete(info) {
      this.$emit('itemDelete', info);
    },
    // 计算当前字段的实际index
    computedRealFieldIndex(findex, sindex) {
      return (findex + 1) + sindex * 4;
    },
    draggablechange() {
      this.resetSort(this.tableDataCopy);
    },
    resetSort(list) {
      const params = { list };
      this.$emit('resetTableData', list);
      settingSort(params).then(res => {
        this.$store.dispatch('GetFieldCategorys');
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.expand-content-no-data {
  display: flex;
  justify-content: center;
  color: #999;
  font-size: 12px;
  height: 56px;
  line-height: 56px;
}
.field-btn {
  display:flex;
}
.expand-content {
  display: flex;
  .expand-content-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .expand-content-item::after {
    position: absolute;
    right: 0;
    top: 50%;
    content: '';
    width: 1px;
    height: 50%;
    transform: translate(0, -50%);
    background-color: #EBEEFD;
  }
  .no-data.expand-content-item::after {
    width: 0;
  }
  .expand-content-item:last-child::after {
    width: 0;
  }
}
.expand-table-container {
  .expand-table-title {
    display: flex;
    align-items: center;
    height: 44px;
    .title {
      color: #141C3D;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
    }
  }
  .expand-table-item {
    border-bottom: 1px solid #EBEEFD;
  }
  .expand-table-item-list {
    display: flex;
    align-items: center;
    font-size: 14px;
    height: 63px;
    cursor: pointer;
  }
  .left {
    padding: 0 10px;
    flex: 1;
    color: #999999;
  }
  .right {
    width: 100px;
    padding: 0 10px;
  }
  .pointer {
    color: #406EFF;
    &:hover {
      color: #668bff;
    }
  }
}
.expand-open-container {
  padding: 12px 0;
  background-color: #FAFAFA !important;
  border-bottom-color: #fff;
  border-radius: 8px;
}
.field-list-item-container {
  display: flex;
  flex-wrap: wrap;
}
.inner-border {
  border-right: 1px solid #EBEEFD;
  &:nth-child(4n) {
    border-right: none;
  }
  &:last-child {
    border-right: none;
  }
}
.draggable-item-move {
  cursor: pointer;
}
</style>
